import { useState, useEffect, useRef } from "react";
import { stringify } from "qs";
import { Button, message, Select, Dropdown, Menu, Space } from "antd";
import { BarsOutlined, CloudUploadOutlined } from "@ant-design/icons";
import AllModal from "./component/AllModal";
import { exportOutbound, batchPrintByQualifiedOutbound } from "./service";
import { handleExportExcel, formatAmount, downLoad, handleExportExcel2 } from "@/utils/utils";
import { WAIT_SHIP, SHIPPED } from "@/views/utils/constant";
import PrintModal from "./component/PrintModal";

const TableHeader = ({ type, ids, form, checkedRows, beforeQuerySearch, children }) => {
	const [loading, setLoading] = useState(false);
	const [visible, setVisible] = useState(false);
	const [modelType, setModelType] = useState("");
	const [title, setTitle] = useState("");
	// 显示弹窗
	const showModal = (title, modalType) => {
		if (checkedRows.length === 0) {
			message.warning("请先勾选订单数据");
			return;
		}
		setVisible(true);
		setTitle(title);
		setModelType(modalType);
	};
	// 导出
	const handleExport = type => {
		const params = {
			type
		};
		switch (type) {
			case "ALL":
				break;
			case "SEARCH":
				const searchData = beforeQuerySearch({ API_DATA: form.getFieldsValue() });
				params.outboundOrderListQueryVO = searchData;
			case "CHOOSE":
				console.log(checkedRows);
				params.chooseList = checkedRows;
				break;
			default:
				break;
		}
		setLoading(true);
		handleExportExcel2(`/new-wms/outboundorder/export-outbound`, params, `销售出库单.xlsx`);
		// exportOutbound(params).then(({ data }) => {
		// 	if (data) {
		// 		downLoad(data, "销售出库单.xlsx");
		// 	}
		// });
	};
	const AllModalProps = {
		visible,
		title,
		modelType,
		ids,
		checkedRows,
		onOk: () => {
			setVisible(false);
		},
		onCancel: () => {
			setVisible(false);
		}
	};

	const PrintModalProps = {
		visible,
		ids,
		checkedRows,
		onCancel: () => {
			setVisible(false);
		}
	};

	return (
		<>
			<Space>
				{type == WAIT_SHIP && (
					<>
						<Button
							onClick={({ target }) => {
								showModal(target.innerText, "manualShipment");
							}}
						>
							手动发货
						</Button>
						<Button
							key=""
							onClick={() => {
								showModal("合格证打印", { checkedRows });
							}}
						>
							合格证批量打印
						</Button>
					</>
				)}
				{(type == WAIT_SHIP || type == SHIPPED) && (
					<>
						<Button
							key="batchPrint"
							onClick={({ domEvent, key }) => {
								showModal(domEvent.target.innerText, key);
							}}
						>
							快递批量打印
						</Button>

						{/* {type == WAIT_SHIP && (
							<Button
								key="updateDelivery"
								onClick={({ domEvent, key }) => {
									showModal(domEvent.target.innerText, key);
								}}
							>
								手动修改快递
							</Button>
						)} */}

						{/* <Button
							key="batchUpdateDelivery"
							onClick={({ domEvent, key }) => {
								showModal(domEvent.target.innerText, key);
							}}
						>
							批量修改快递
						</Button> */}
						{/* {type == WAIT_SHIP && (
							<Button
								key="batchExport"
								onClick={({ domEvent, key }) => {
									showModal(domEvent.target.innerText, key);
								}}
							>
								批量导入修改
							</Button>
						)} */}
						{/* <Dropdown
							trigger="hover"
							overlay={
								<Menu>
									<Menu.Item
										key="batchPrint"
										onClick={({ domEvent, key }) => {
											showModal(domEvent.target.innerText, key);
										}}
									>
										快递批量打印
									</Menu.Item>
									{type == WAIT_SHIP && (
										<Menu.Item
											key="updateDelivery"
											onClick={({ domEvent, key }) => {
												showModal(domEvent.target.innerText, key);
											}}
										>
											手动修改快递
										</Menu.Item>
									)}
									<Menu.Item
										key="batchUpdateDelivery"
										onClick={({ domEvent, key }) => {
											showModal(domEvent.target.innerText, key);
										}}
									>
										批量修改快递
									</Menu.Item>
									{type == WAIT_SHIP && (
										<Menu.Item
											key="batchExport"
											onClick={({ domEvent, key }) => {
												showModal(domEvent.target.innerText, key);
											}}
										>
											批量导入修改
										</Menu.Item>
									)}
								</Menu>
							}
						>
							<Button>快递操作</Button>
						</Dropdown> */}
					</>
				)}

				{type == WAIT_SHIP && (
					<>
						{/* <Button
							onClick={({ target }) => {
								showModal(target.innerText, "getTrackNum");
							}}
						>
							获取运单号
						</Button> */}
						{/* <Button key="" onClick={() => {}}>
							一单多包
						</Button> */}
					</>
				)}
			</Space>
			<Space>
				<Dropdown
					trigger="hover"
					overlay={
						<Menu>
							<Menu.Item
								key="ALL"
								onClick={({ key }) => {
									handleExport(key);
								}}
							>
								导出所有项
							</Menu.Item>
							<Menu.Item
								key="SEARCH"
								onClick={({ key }) => {
									handleExport(key);
								}}
							>
								导出筛选项
							</Menu.Item>
							<Menu.Item
								key="CHOOSE"
								onClick={({ key }) => {
									handleExport(key);
								}}
							>
								导出勾选项
							</Menu.Item>
						</Menu>
					}
				>
					<Button type="text">
						<CloudUploadOutlined className="main-color" /> 导出
					</Button>
				</Dropdown>
				{children}
			</Space>

			{<AllModal {...AllModalProps} />}
			{<PrintModal {...PrintModalProps} />}
		</>
	);
};
export default TableHeader;
